<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml" xmlns: xmlns:>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福山-路线匹配分析</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/css/elemet-ui.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/css/rem.css"/>
    <link rel="stylesheet" href="../assets/css/repeat.css">
    <link rel="stylesheet" href="../assets/icons/iconfont.css">
    <link href="../assets/map/offlinemap/css/map.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../assets/css/style.css"/>
</head>

<body class="bighome2">
<div id="app" v-cloak>
    <div class="pageTitle">
        <!--<ul class="tabUl">-->
        <!--<li :class="{'li_active':activeIndex === index}" v-for="(item, index) in menuList" :key="index"-->
        <!--@click="routerGo(item)">{{item.name}}-->
        <!--</li>-->
        <!--</ul>-->
        <div class="pageTitle-logo">
            <img src="../assets/images/logo.png"/>
            <div>
                <a href="javascript:void(0)">福山公安数据治理系统</a>
                <br/>
                <a href="javascript:void(0)">智能作战系统</a>
            </div>
        </div>

        <div class="pageTitle-user">
            <span class="pageTitle-user-txt">管理员</span>
            <a class="pageTitle-user-img" href="javascript:void(0)"><img src="../assets/images/user.png"/></a>
        </div>

        <ul class="pageTitle-list">
            <li><a href="javascript:void(0)">全息档案</a></li>
            <li><a href="javascript:void(0)">警情研判</a></li>
            <li><a href="javascript:void(0)">风险防控</a></li>
            <li><a href="javascript:void(0)">分析工具</a></li>
            <li>
                <a href="javascript:void(0)">轨迹分析</a>
                <ul class="pageTitle-list-data">
                    <li><a href="trajectoryAnalysisCrash.html">碰撞分析</a></li>
                    <li><a href="trajectoryAnalysisPersonnel.html">人员轨迹</a></li>
                    <li><a href="trajectoryAnalysisAccompany.html">伴随分析</a></li>
                    <li><a href="trajectoryAnalysisTime.html">时间碰撞分析</a></li>
                    <li><a href="trajectoryAnalysisPath.html">路线匹配分析</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="pageNavigation">
        <div class="pageNavigation-dot">
        </div>
        <div class="pageNavigation-text">智能作战系统 > 轨迹分析 ></div>
        <div class="pageNavigation-txt">&nbsp;路线匹配分析</div>
        <!--<el-button type="primary" size="mini" @click="window.location.href='bigHome.html'" style="position:absolute;right:5rem;">-->
        <!--重点人员管控-->
        <!--</el-button>-->
    </div>

    <div class="personnel-view">
        <div class="personnel-view-k">
            <div id="map_demo"></div>

            <!--任务列表-->
            <!--<div class="path-task-list">
                <div class="path-task-list-title">
                    <div>任务列表</div>
                    <button>新建任务</button>
                </div>
                <ul class="path-task-list-details">
                    <li>
                        <div>
                            <h5><b>任务名称：</b><span>911连环杀人案嫌疑人路线跟踪</span></h5>
                            <h6>提交时间：<span>2018-04-03 15:02:03</span></h6>
                        </div>
                        <button class="btn-red">开始匹配</button>
                    </li>
                    <li>
                        <div>
                            <h5><b>任务名称：</b><span>911连环杀人案</span></h5>
                            <h6>提交时间：<span>2018-04-03 15:02:03</span></h6>
                        </div>
                        <button class="btn-yellow">匹配中</button>
                    </li>
                    <li>
                        <div>
                            <h5><b>任务名称：</b><span>911连环杀人案</span></h5>
                            <h6>提交时间：<span>2018-04-03 15:02:03</span></h6>
                        </div>
                        <button class="btn-green">匹配完成</button>
                    </li>
                    <li>
                        <div>
                            <h5><b>任务名称：</b><span>911连环杀人案</span></h5>
                            <h6>提交时间：<span>2018-04-03 15:02:03</span></h6>
                        </div>
                        <button class="btn-yellow">匹配中</button>
                    </li>
                    <li>
                        <div>
                            <h5><b>任务名称：</b><span>911连环杀人案</span></h5>
                            <h6>提交时间：<span>2018-04-03 15:02:03</span></h6>
                        </div>
                        <button class="btn-green">匹配完成</button>
                    </li>
                    <li>
                        <div>
                            <h5><b>任务名称：</b><span>911连环杀人案</span></h5>
                            <h6>提交时间：<span>2018-04-03 15:02:03</span></h6>
                        </div>
                        <button class="btn-yellow">匹配中</button>
                    </li>
                    <li>
                        <div>
                            <h5><b>任务名称：</b><span>911连环杀人案</span></h5>
                            <h6>提交时间：<span>2018-04-03 15:02:03</span></h6>
                        </div>
                        <button class="btn-green">匹配完成</button>
                    </li>
                </ul>
            </div>-->

            <!--结果列表-->
            <!--<div class="path-result-list">
                <div class="path-result-title">
                    <div>结果列表</div>
                    <i class="el-icon-close"></i>
                </div>
                <div class="path-result-table-title">
                    <div>特征码</div>
                    <div>操作</div>
                </div>
                <div class="path-result-table">
                    <table>
                        <tbody>
                        <tr>
                            <td>1p-2e-4r-54-ty-uj</td>
                            <td><span>查看</span></td>
                        </tr>
                        <tr>
                            <td>1p-2e-4r-54-ty-uj</td>
                            <td><span>查看</span></td>
                        </tr>
                        <tr>
                            <td>1p-2e-4r-54-ty-uj</td>
                            <td><span>查看</span></td>
                        </tr>
                        <tr>
                            <td>1p-2e-4r-54-ty-uj</td>
                            <td><span>查看</span></td>
                        </tr>
                        <tr>
                            <td>1p-2e-4r-54-ty-uj</td>
                            <td><span>查看</span></td>
                        </tr>
                        <tr>
                            <td>1p-2e-4r-54-ty-uj</td>
                            <td><span>查看</span></td>
                        </tr>
                        <tr>
                            <td>1p-2e-4r-54-ty-uj</td>
                            <td><span>查看</span></td>
                        </tr>
                        <tr>
                            <td>1p-2e-4r-54-ty-uj</td>
                            <td><span>查看</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>-->

            <!--所选路线轨迹详情-->
            <!--<div class="path-route">
                <div class="path-route-title">
                    <div>所选路线轨迹详情</div>
                    <i class="el-icon-close"></i>
                </div>
                <div class="path-route-code"><b>特征码：</b><span>5600012356789098</span></div>
                <div class="path-route-details">
                    <div class="path-route-details-n">
                        <el-steps direction="vertical" space="80px">
                            <el-step title="坪和新寨" description="2017-10-02 08:30"></el-step>
                            <el-step title="明珠路23号" description="2017-10-02 08:30"></el-step>
                            <el-step title="银河路18号" description="2017-10-02 08:30"></el-step>
                            <el-step title="天马路7号" description="2017-10-02 08:30"></el-step>
                            <el-step title="世纪花园23号" description="2017-10-02 08:30"></el-step>
                            <el-step title="南海公园" description="2017-10-02 08:30"></el-step>
                            <el-step title="海关路22号" description="2017-10-02 08:30"></el-step>
                            <el-step title="联大路07号" description="2017-10-02 08:30"></el-step>
                            <el-step title="兴隆路口" description="2017-10-02 08:30"></el-step>
                            <el-step title="南海公园" description="2017-10-02 08:30"></el-step>
                            <el-step title="海关路22号" description="2017-10-02 08:30"></el-step>
                            <el-step title="联大路07号" description="2017-10-02 08:30"></el-step>
                            <el-step title="兴隆路口" description="2017-10-02 08:30"></el-step>
                        </el-steps>
                    </div>
                </div>
            </div>-->

            <!--任务详情-->
            <div class="path-task-details">
                <div class="path-task-details-title">
                    <div>任务详情</div>
                    <i class="el-icon-close"></i>
                </div>
                <div class="path-task-details-apellation">
                    <div><b>任务名称：</b><span>911连环杀人案线路跟踪</span></div>
                </div>
                <div class="path-task-details-time">
                    <p>轨迹时间:</p>
                    <div class="path-task-details-t">
                        <el-date-picker
                          v-model="value4"
                          type="datetimerange"
                          range-separator="至"
                          prefix-icon="el-icon-date"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
                <div class="path-task-details-list">
                    <div class="path-task-details-list-n">
                        <div>匹配设备列表:</div>
                        <ul>
                            <li>
                                <p>节点一：</p>
                                <div class="path-task-details-list-s">
                                    <el-checkbox-group v-model="checkList_part1">
                                        <el-checkbox label="设备1.1"></el-checkbox>
                                        <el-checkbox label="设备1.2"></el-checkbox>
                                        <el-checkbox label="设备1.3"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </li>
                            <li>
                                <p>节点二：</p>
                                <div class="path-task-details-list-s">
                                    <el-checkbox-group v-model="checkList_part2">
                                        <el-checkbox label="设备1.1"></el-checkbox>
                                        <el-checkbox label="设备1.2"></el-checkbox>
                                        <el-checkbox label="设备1.3"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </li>
                            <li>
                                <p>节点三：</p>
                                <div class="path-task-details-list-s">
                                    <el-checkbox-group v-model="checkList_part3">
                                        <el-checkbox label="设备1.1"></el-checkbox>
                                        <el-checkbox label="设备1.2"></el-checkbox>
                                        <el-checkbox label="设备1.3"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </li>
                            <li>
                                <p>节点一：</p>
                                <div class="path-task-details-list-s">
                                    <el-checkbox-group v-model="checkList_part1">
                                        <el-checkbox label="设备1.1"></el-checkbox>
                                        <el-checkbox label="设备1.2"></el-checkbox>
                                        <el-checkbox label="设备1.3"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </li>
                            <li>
                                <p>节点二：</p>
                                <div class="path-task-details-list-s">
                                    <el-checkbox-group v-model="checkList_part2">
                                        <el-checkbox label="设备1.1"></el-checkbox>
                                        <el-checkbox label="设备1.2"></el-checkbox>
                                        <el-checkbox label="设备1.3"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </li>
                            <li>
                                <p>节点三：</p>
                                <div class="path-task-details-list-s">
                                    <el-checkbox-group v-model="checkList_part3">
                                        <el-checkbox label="设备1.1"></el-checkbox>
                                        <el-checkbox label="设备1.2"></el-checkbox>
                                        <el-checkbox label="设备1.3"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </li>
                            <li>
                                <p>节点七：</p>
                                <div class="path-task-details-list-s">
                                    <el-checkbox-group v-model="checkList_part3">
                                        <el-checkbox label="设备1.1"></el-checkbox>
                                        <el-checkbox label="设备1.2"></el-checkbox>
                                        <el-checkbox label="设备1.3"></el-checkbox>
                                        <el-checkbox label="设备1.1"></el-checkbox>
                                        <el-checkbox label="设备1.2"></el-checkbox>
                                        <el-checkbox label="设备1.3"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </li>
                            <li>
                                <p>节点七：</p>
                                <div class="path-task-details-list-s">
                                    <el-checkbox-group v-model="checkList_part3">
                                        <el-checkbox label="设备1.1"></el-checkbox>
                                        <el-checkbox label="设备1.2"></el-checkbox>
                                        <el-checkbox label="设备1.3"></el-checkbox>
                                        <el-checkbox label="设备1.1"></el-checkbox>
                                        <el-checkbox label="设备1.2"></el-checkbox>
                                        <el-checkbox label="设备1.3"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--新建任务-->
            <div class="new-mission">
                <div class="new-mission-title">
                    <p>新建任务</p>
                    <i class="el-icon-d-arrow-left"></i>
                </div>
                <div class="new-mission-name">
                    <span>任务名称：</span>
                    <input type="text"/>
                </div>
                <div class="new-mission-time">
                    <span>轨迹时间：</span>
                    <div class="path-task-details-t">
                        <el-date-picker
                          v-model="value4"
                          type="datetimerange"
                          range-separator="至"
                          prefix-icon="el-icon-date"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
                <div class="new-mission-list">
                    <div class="new-mission-list-top">
                        <a href="#node-details01" class="new-mission-list-active">模糊路线绘制</a>
                        <a href="#node-details02">精准路线绘制</a>
                    </div>
                    <div class="new-mission-list-content">
                        <div id="node-details01" class="new-mission-list-content-one">
                            <div class="path-task-details-list-n">
                                <div>匹配设备列表：</div>
                                <ul>
                                    <li>
                                        <p class="path-node-title"><span>节点一：</span><span>选择设备集</span></p>
                                        <div class="path-task-details-list-s">
                                            <el-checkbox-group v-model="checkList_part1">
                                                <el-checkbox label="汽车站卡口"></el-checkbox>
                                                <el-checkbox label="汽车站卡口1"></el-checkbox>
                                                <el-checkbox label="汽车站卡口2"></el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                    </li>
                                    <li>
                                        <p class="path-node-title"><span>节点二：</span><span>选择设备集</span></p>
                                        <div class="path-task-details-list-s">
                                            <el-checkbox-group v-model="checkList_part2">
                                                <el-checkbox label="汽车站卡口"></el-checkbox>
                                                <el-checkbox label="汽车站卡口1"></el-checkbox>
                                                <el-checkbox label="汽车站卡口2"></el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                    </li>
                                    <li>
                                        <p class="path-node-title"><span>节点三：</span><span>选择设备集</span></p>
                                        <div class="path-task-details-list-s">
                                            <el-checkbox-group v-model="checkList_part3">
                                                <el-checkbox label="汽车站卡口"></el-checkbox>
                                                <el-checkbox label="汽车站卡口1"></el-checkbox>
                                                <el-checkbox label="汽车站卡口2"></el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                    </li>
                                    <li>
                                        <p class="path-node-title"><span>节点四：</span><span>选择设备集</span></p>
                                        <div class="path-task-details-list-s">
                                            <el-checkbox-group v-model="checkList_part1">
                                                <el-checkbox label="汽车站卡口"></el-checkbox>
                                                <el-checkbox label="汽车站卡口1"></el-checkbox>
                                                <el-checkbox label="汽车站卡口2"></el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                    </li>
                                    <li>
                                        <p class="path-node-title"><span>节点五：</span><span>选择设备集</span></p>
                                        <div class="path-task-details-list-s">
                                            <el-checkbox-group v-model="checkList_part2">
                                                <el-checkbox label="汽车站卡口"></el-checkbox>
                                                <el-checkbox label="汽车站卡口1"></el-checkbox>
                                                <el-checkbox label="汽车站卡口2"></el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                    </li>
                                    <li>
                                        <p class="path-node-title"><span>节点六：</span><span>选择设备集</span></p>
                                        <div class="path-task-details-list-s">
                                            <el-checkbox-group v-model="checkList_part3">
                                                <el-checkbox label="汽车站卡口"></el-checkbox>
                                                <el-checkbox label="汽车站卡口1"></el-checkbox>
                                                <el-checkbox label="汽车站卡口2"></el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div id="node-details02" class="new-mission-list-content-two">
                            <div class="new-mission-list-content-node">
                                <div>匹配设备列表：</div>
                                <ul>
                                    <li><b>节点一：</b><span>汽车站wifi卡口1</span></li>
                                    <li><b>节点二：</b><span>火车站wifi卡口1</span></li>
                                    <li><b>节点三：</b><span>汽车站wifi卡口1</span></li>
                                    <li><b>节点五：</b><span>飞机场wifi卡口1</span></li>
                                    <li><b>节点六：</b><span>汽车站wifi卡口1</span></li>
                                    <li><b>节点七：</b><span>汽车站wifi卡口1</span></li>
                                    <li><b>节点八：</b><span>汽车站wifi卡口1</span></li>
                                    <li><b>节点一：</b><span>汽车站wifi卡口1</span></li>
                                    <li><b>节点二：</b><span>火车站wifi卡口1</span></li>
                                    <li><b>节点三：</b><span>汽车站wifi卡口1</span></li>
                                    <li><b>节点五：</b><span>飞机场wifi卡口1</span></li>
                                    <li><b>节点六：</b><span>汽车站wifi卡口1</span></li>
                                    <li><b>节点七：</b><span>汽车站wifi卡口1</span></li>
                                    <li><b>节点八：</b><span>汽车站wifi卡口1</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="new-mission-btn">
                    <button>清空</button>
                    <button>保存</button>
                </div>
            </div>

            <!--滑块-->
            <div class="crash-slug"></div>
        </div>
    </div>

</div>
<!-- 引入组件库 -->
<script type="text/javascript" src="../scripts/vue/vue.js"></script>
<script src="../scripts/jquery-3.0.0.min.js.js"></script>
<script type="text/javascript" src="../scripts/element/element.js"></script>
<script type="text/javascript" src="../scripts/swiper/swiper-4.1.6.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js"></script>-->
<script type="text/javascript" src="../scripts/urls.js"></script>
<script src="../scripts/axios.min.js"></script>
<script type="text/javascript" src="../scripts/utils.js"></script>
<script src="../assets/map/offlinemap/map_load.js"></script>
<script src="../assets/map/layer/layer.js"></script>
<script src="../scripts/test.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data: {
            value6: '',
            checkList_part1:['0'],
            checkList_part2:['0'],
            checkList_part3:['0'],
            value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]
        },
        mounted:function(){
            this.data();
        },
        methods:{
            data:function(){
               let pickerOptions2={
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                }
            }
         }
    });
    // 百度地图API功能
    var map = new BMap.Map("map_demo");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 7);  // 初始化地图,设置中心点坐标和地图级别
    map.setCurrentCity("武汉");          // 设置地图中心显示的城市 new！
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.addControl(new BMap.NavigationControl());   //缩放按钮
    map.addControl(new BMap.MapTypeControl( {mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]} ));   //添加地图类型控件 离线只支持普通、卫星地图; 三维不支持
    //监听地图缩放
    map.addEventListener("zoomend", function(){
        if( this.getZoom() > 8 ) {
            layer.msg("默认只有8级地图, 超过无法显示");
        }
    });

    var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_LEFT});   //设置版权控件位置
    map.addControl(cr); //添加版权控件
    var bs = map.getBounds();   //返回地图可视区域
    // cr.addCopyright({id: 1, content: "<a href='http://www.xiaoguo123.com/p/baidumap_offline_v21?baidumap' style='font-size:20px;background:yellow;margin-left:60px'>离线地图API V2.1, 默认8级地图, 点击获取更多信息</a>", bounds: bs});
</script>
</body>

</html>